<template>
  <!-- 搜索按钮 -->
  
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="input-group">
        <input
          type="text"
          class="form-control input-sm"
          placeholder=""
          value=""
          v-model="keyWord"
        />
        <span class="input-group-btn">
          <div
            class=""
            @click="searchBulletin()"
            type="button"
          >&nbsp;&nbsp;
            <button class="btn btn-danger" aria-hidden="true"  >搜索</button
            >
          </div>
        </span>
      </div>
    </div>
  </div>
<br>
  <!-- 表格 -->
  <table class="table">
    <thead>
      <tr>
        <th>序号</th>
         <th>主题</th>
        <th>内容</th>
        
        <th>操作</th>
       
      </tr>
    </thead>
    <tbody>
      <tr v-for="ara in Bulletins" :key="ara.id">
        <!-- //插值 插的是后端得到的属性，和数据库表里对应-->
        <td style="width: 60px">{{ ara.id }}</td>
  
        <td>{{ ara.title }}</td>
        <td>{{ ara.content }}</td>
        
        
         <td style="width: 200px">
          <button type="button"
             @click="addBulletin()" class="btn btn-success">增加</button>
          <button
            type="button"
            class="btn btn-success"
            @click="editBulletin(ara)"
          >
            编辑
          </button>
          <button
            type="button"
          class="btn btn-success"
            @click="deleteBulletin(ara.id)"
          >
            删除
          </button>

        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
// 安装axios来传后端数据
// npm install axios --save
//导入axios，用它
import { http } from "../../utils/http.js";

// 表格里的数据
export default {
   data() {  
    return {  
      Bulletins: [],  
      keyWord: "",  
    };  
  },  
  created() {  
    http  
      .get("/getBullentin")  
      .then((res) => {  
        if (res.data) {  
          this.Bulletins = res.data;  
          console.log(res);  
        } 
      })  
      .catch((error) => {  
        // 处理请求错误  
        console.error(error);  
      });  
  },  
  methods: {  


    
  //点击增加时候跳转
    addBulletin() {
      this.$router.push("/addBulletin");
    },

searchAppt(){
// /搜索方法
     
      http.get("/getBallApptstste?Apptstste="+this.keyWord)
      .then(res=>{
       console.log(this.keyword)
        this.appts=res.data
      })
    
},

   
  editBulletin(ara) {  
      this.$router.push({
        path: "/updateBulletin",
        // 把参数带到编辑页面
        query: {
          //将数据格式化一下 JSON.stringify
          BulletinInfo: JSON.stringify(ara),
        },
      });
    },  
    
    deleteBulletin(id) {  
      //后端传id
      http.get("/deleteBulletin?id=" + id).then((res) => {
        // console.log(res)
        if (res.status === 200) {
          alert("删除成功");
        } else {
          alert("删除失败");
        }
        // 页面刷新
        this.$router.go(0);
      });
    },  
  },  
}; 

 

   








</script>

<style scoped>

</style>